<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: springgreen;
            position: absolute;
            top: 100px;
            left: 200px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const box = document.querySelector("div")
        box.onclick = function () {
            move(this, "left", 400)
            // move(this, "top", 600)
            // move(this, "width", 600)
            // move(this, "height", 600)
        }

        //移动函数
        function move(ele, type, target) {
            let timer = setInterval(() => {
                // console.log(ele,type,target);
                //获取当前所在的位置
                let current = parseInt(window.getComputedStyle(ele)[type])
                //计算需要移动的步子
                let step = (target - current) / 10
                console.log("移动步子",step);
                if (current == target) {
                    //停止定时器
                    clearInterval(timer)
                    //释放一下空间
                    timer = null;
                }else{
                    /* 表示盒子的移动 */
                    ele.style[type] = current + step + "px";
                }
            }, 16);
        }
    </script>
</body>

</html>